<!-- 管理员登录页面-->
<template>
    <div class="login-container">
        <el-card class="card">
            <div class="login-body">
                <div class="login-title">
                    <b style="color: black;display: inline-block; margin-bottom: 20px;font-size: 28px;">
                         登录后台管理系统
                    </b>
                </div>

                <el-input placeholder="请输入管理员账号" v-model="userForm.accountNumber" class="login-input">
                    <template slot="prepend">
                        <div class="el-icon-user" style="font-size: 24px;"></div>
                    </template>
                </el-input>

                <el-input placeholder="请输入管理员密码" v-model="userForm.adminPassword" class="login-input"
                            @keyup.enter.native="login"  show-password>
                    <template slot="prepend">
                        <div class="el-icon-lock" style="font-size: 24px;"></div>
                    </template>
                </el-input>
                
                <div class="login-submit" style="margin-top: 20px"  >
                    <el-button type="primary" @click="login" class="login"> 登录</el-button>
                    <el-button type="warning" autocomplete="off" @click="goToLogin" class="backButton"> 返回</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                userForm: {
                    accountNumber: '',
                    adminPassword: ''
                }
            };
        },
        methods: {
            login() {
                this.$api.adminLogin({
                    accountNumber: this.userForm.accountNumber,
                    adminPassword: this.userForm.adminPassword
                }).then(res => {
                    console.log(res);
                    if (res.status_code === 1) {
                        console.log(res);
                        this.$sta.isLogin = true;
                        this.$sta.adminName=res.data.adminName;
                        this.$router.replace({path:'/platform-admin'});
                    } else {
                        this.$message.error('登录失败，账号或密码错误！');
                    }
                }).catch((e) => {
                    console.log(e)
                    if (
                        e.response == undefined ||
                        e.response.data == undefined
                    ) {
                        this.$message({
                            showClose: true,
                            message: e,
                            type: "error",
                            duration: 20000,
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: e.response.data,
                            type: "error",
                            duration: 20000,
                        });
                    }
                });

            },
            goToLogin() {
                this.$router.push('/login');
            }
        }
    }
</script>

<style scoped>
    .login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        background-color: #f1f1f1;
    
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        overflow-y: auto;
        height: 100%;
        background: url("../../assets/background.jpg") center top / cover no-repeat;
    }
    .card{
        border-radius: 20px
    }
    /* 框体扁平化 */
    .login-body {
        padding: 30px;
        width: 300px;
        height: 100%;
    }
    .login-title {
        padding-bottom: 30px;
        text-align: center;
        font-weight: 600;
        font-size: 20px;
        color: #409EFF;
        cursor: pointer;
    }
    .login-input {
        margin-bottom: 20px;
    }
    .login-submit {
        display: flex;
        justify-content: center;
    }
    .backButton{
        background-color: #3d96ee; /* 按钮的背景色 */
        color: white; /* 按钮的文字颜色 */
        border: none; /* 移除按钮的边框 */
        border-radius: 20px; /* 设置按钮的边框半径，使按钮变成圆弧状 */
        margin-left: 30px;
    }
    .backButton:hover {
        background-color: #409EFF; /* 鼠标悬停时的背景色 */
        color: white; /* 鼠标悬停时的文字颜色 */
    }
    .login {
        background-color: #76c794; /* 按钮的背景色 */
        color: white; /* 按钮的文字颜色 */
        border: none; /* 移除按钮的边框 */
        border-radius: 20px; /* 设置按钮的边框半径，使按钮变成圆弧状 */
    }
    .login:hover {
        background-color: #85d27a; /* 鼠标悬停时的背景色 */
        color: white; /* 鼠标悬停时的文字颜色 */
    }
</style>